<template><div><h2 id="资源绑定-vite" tabindex="-1"><a class="header-anchor" href="#资源绑定-vite"><span>资源绑定（Vite）</span></a></h2>
<ul>
<li><a href="#introduction">介绍</a></li>
<li><a href="#installation">安装和设置</a>
<ul>
<li><a href="#installing-node">安装 Node</a></li>
<li><a href="#installing-vite-and-laravel-plugin">安装 Vite 和 Laravel 插件</a></li>
<li><a href="#configuring-vite">配置 Vite</a></li>
<li><a href="#loading-your-scripts-and-styles">加载你的脚本和样式</a></li>
<li><a href="#inline-assets">行内资产</a></li>
</ul>
</li>
<li><a href="#running-vite">运行 Vite</a></li>
<li><a href="#working-with-scripts">使用 JavaScript</a>
<ul>
<li><a href="#aliases">别名</a></li>
<li><a href="#vue">Vue</a></li>
<li><a href="#react">React</a></li>
<li><a href="#inertia">Inertia</a></li>
<li><a href="#url-processing">URL 处理</a></li>
</ul>
</li>
<li><a href="#working-with-stylesheets">使用样式表</a></li>
<li><a href="#working-with-blade-and-routes">使用 Blade 和路由</a>
<ul>
<li><a href="#blade-processing-static-assets">使用 Vite 处理静态资源</a></li>
<li><a href="#blade-refreshing-on-save">保存后刷新</a></li>
<li><a href="#blade-aliases">别名</a></li>
</ul>
</li>
<li><a href="#custom-base-urls">自定义基础 URL</a></li>
<li><a href="#environment-variables">环境变量</a></li>
<li><a href="#disabling-vite-in-tests">在测试中禁用 Vite</a></li>
<li><a href="#ssr">服务器端渲染（SSR）</a></li>
<li><a href="#script-and-style-attributes">脚本和样式标记属性</a>
<ul>
<li><a href="#content-security-policy-csp-nonce">内容安全策略（CSP）随机数</a></li>
<li><a href="#subresource-integrity-sri">子资源完整性（SRI）</a></li>
<li><a href="#arbitrary-attributes">任意属性</a></li>
</ul>
</li>
<li><a href="#advanced-customization">高级定制</a>
<ul>
<li><a href="#correcting-dev-server-urls">更正开发服务器 URL</a></li>
</ul>
</li>
</ul>
<h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍"><span>介绍</span></a></h2>
<p><a href="https://vitejs.dev/" target="_blank" rel="noopener noreferrer">Vite</a> 是一款现代前端构建工具，提供极快的开发环境并将你的代码捆绑到生产准备的资源中。在使用 Laravel 构建应用程序时，通常会使用 Vite 将你的应用程序的 CSS 和 JavaScript 文件绑定到生产环境的资源中。</p>
<p>Laravel 通过提供官方插件和 Blade 指令，与 Vite 完美集成，以加载你的资源进行开发和生产。</p>
<blockquote>
<p>注意：你正在运行 Laravel Mix 吗？在新的 Laravel 安装中，Vite 已经取代了 Laravel Mix 。有关 Mix 的文档，请访问 <a href="https://laravel-mix.com/" target="_blank" rel="noopener noreferrer">Laravel Mix</a> 网站。如果你想切换到 Vite，请参阅我们的 <a href="https://github.com/laravel/vite-plugin/blob/main/UPGRADE.md#migrating-from-laravel-mix-to-vite" target="_blank" rel="noopener noreferrer">迁移指南</a>。</p>
</blockquote>
<h4 id="选择-vite-还是-laravel-mix" tabindex="-1"><a class="header-anchor" href="#选择-vite-还是-laravel-mix"><span>选择 Vite 还是 Laravel Mix</span></a></h4>
<p>在转向 Vite 之前，新的 Laravel 应用程序在打包资产时通常使用 <a href="https://laravel-mix.com/" target="_blank" rel="noopener noreferrer">Mix</a>，它由 <a href="https://webpack.js.org/" target="_blank" rel="noopener noreferrer">webpack</a> 支持。Vite 专注于在构建丰富的 JavaScript 应用程序时提供更快、更高效的开发体验。如果你正在开发单页面应用程序（SPA），包括使用 <a href="https://inertiajs.com/" target="_blank" rel="noopener noreferrer">Inertia</a> 工具开发的应用程序，则 Vite 是完美选择。</p>
<p>Vite 也适用于具有 JavaScript “sprinkles” 的传统服务器端渲染应用程序，包括使用 <a href="https://laravel-livewire.com/" target="_blank" rel="noopener noreferrer">Livewire</a> 的应用程序。但是，它缺少 Laravel Mix 支持的某些功能，例如将没有直接在 JavaScript 应用程序中引用的任意资产复制到构建中的能力。</p>
<h4 id="切换回-mix" tabindex="-1"><a class="header-anchor" href="#切换回-mix"><span>切换回 Mix</span></a></h4>
<p>如果你使用我们的 Vite 脚手架创建了一个新的 Laravel 应用程序，但需要切换回 Laravel Mix 和 webpack，那么也没有问题。请参阅我们的<a href="https://github.com/laravel/vite-plugin/blob/main/UPGRADE.md#migrating-from-vite-to-laravel-mix" target="_blank" rel="noopener noreferrer">从 Vite 切换到 Mix 的官方指南</a>。</p>
<h2 id="安装和设置" tabindex="-1"><a class="header-anchor" href="#安装和设置"><span>安装和设置</span></a></h2>
<blockquote>
<p><strong>注意</strong><br>
以下文档讨论如何手动安装和配置 Laravel Vite 插件。但是，Laravel 的<a href="https://learnku.com/docs/laravel/10.x/starter-kits" target="_blank" rel="noopener noreferrer">起始套件</a>已经包含了所有的脚手架，并且是使用 Laravel 和 Vite 开始最快的方式。</p>
</blockquote>
<h3 id="安装-node" tabindex="-1"><a class="header-anchor" href="#安装-node"><span>安装 Node</span></a></h3>
<p>在运行 Vite 和 Laravel 插件之前，你必须确保已安装 Node.js（16+）和 NPM：</p>
<p><code v-pre>node -v npm -v</code></p>
<p>你可以通过<a href="https://nodejs.org/en/download/" target="_blank" rel="noopener noreferrer">官方 Node 网站</a>的简单图形安装程序轻松安装最新版本的 Node 和 NPM。或者，如果你使用的是 <a href="https://learnku.com/docs/laravel/10.x/sail" target="_blank" rel="noopener noreferrer">Laravel Sail</a>，可以通过 Sail 调用 Node 和 NPM：</p>
<p><code v-pre>./vendor/bin/sail node -v ./vendor/bin/sail npm -v</code></p>
<h3 id="安装-vite-和-laravel-插件" tabindex="-1"><a class="header-anchor" href="#安装-vite-和-laravel-插件"><span>安装 Vite 和 Laravel 插件</span></a></h3>
<p>在 Laravel 的全新安装中，你会在应用程序目录结构的根目录下找到一个 package.json 文件。默认的 package.json 文件已经包含了你开始使用 Vite 和 Laravel 插件所需的一切。你可以通过 NPM 安装应用程序的前端依赖：</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line"><span class="token function">npm</span> <span class="token function">install</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="配置-vite" tabindex="-1"><a class="header-anchor" href="#配置-vite"><span>配置 Vite</span></a></h3>
<p>Vite 通过项目根目录中的 <code v-pre>vite.config.js</code> 文件进行配置。你可以根据自己的需要自定义此文件，也可以安装任何其他插件，例如 <code v-pre>@vitejs/plugin-vue</code> 或 <code v-pre>@vitejs/plugin-react</code>。</p>
<p>Laravel Vite 插件需要你指定应用程序的入口点。这些入口点可以是 JavaScript 或 CSS 文件，并包括预处理语言，例如 TypeScript、JSX、TSX 和 Sass。</p>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vite'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> laravel <span class="token keyword">from</span> <span class="token string">'laravel-vite-plugin'</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">    <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token function">laravel</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">            <span class="token string">'resources/css/app.css'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token string">'resources/js/app.js'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果你正在构建一个单页应用程序，包括使用 Inertia 构建的应用程序，则最好不要使用 CSS 入口点：</p>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vite'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> laravel <span class="token keyword">from</span> <span class="token string">'laravel-vite-plugin'</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">    <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token function">laravel</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">            <span class="token string">'resources/css/app.css'</span><span class="token punctuation">,</span> <span class="token comment">// [tl! remove]</span></span>
<span class="line">            <span class="token string">'resources/js/app.js'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>相反，你应该通过 JavaScript 导入你的 CSS。通常，这将在应用程序的 resources/js/app.js 文件中完成：</p>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token string">'./bootstrap'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token string">'../css/app.css'</span><span class="token punctuation">;</span> <span class="token comment">// [tl! add]</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><p>Laravel 插件还支持多个入口点和高级配置选项，例如<a href="#ssr">SSR 入口点</a>。</p>
<h4 id="使用安全的开发服务器" tabindex="-1"><a class="header-anchor" href="#使用安全的开发服务器"><span>使用安全的开发服务器</span></a></h4>
<p>如果你的本地开发 Web 服务器通过 HTTPS 提供应用程序服务，则可能会遇到连接到 Vite 开发服务器的问题。</p>
<p>如果你在本地开发中使用 <a href="https://learnku.com/docs/laravel/10.x/valet" target="_blank" rel="noopener noreferrer">Laravel Valet</a> 并已针对你的应用程序运行 <a href="https://learnku.com/docs/laravel/10.x/valetmd#securing-sites" target="_blank" rel="noopener noreferrer">secure 命令</a>，则可以配置 Vite 开发服务器自动使用 Valet 生成的 TLS 证书：</p>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vite'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> laravel <span class="token keyword">from</span> <span class="token string">'laravel-vite-plugin'</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">    <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token function">laravel</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">            <span class="token comment">// ...</span></span>
<span class="line">            <span class="token literal-property property">valetTls</span><span class="token operator">:</span> <span class="token string">'my-app.test'</span><span class="token punctuation">,</span> <span class="token comment">// [tl! add]</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>当使用其他 Web 服务器时，你应生成一个受信任的证书并手动配置 Vite 使用生成的证书：</p>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line"><span class="token comment">// ...</span></span>
<span class="line"><span class="token keyword">import</span> fs <span class="token keyword">from</span> <span class="token string">'fs'</span><span class="token punctuation">;</span> <span class="token comment">// [tl! add]</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">const</span> host <span class="token operator">=</span> <span class="token string">'my-app.test'</span><span class="token punctuation">;</span> <span class="token comment">// [tl! add]</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// ...</span></span>
<span class="line">    <span class="token literal-property property">server</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// [tl! add]</span></span>
<span class="line">        host<span class="token punctuation">,</span> <span class="token comment">// [tl! add]</span></span>
<span class="line">        <span class="token literal-property property">hmr</span><span class="token operator">:</span> <span class="token punctuation">{</span> host <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// [tl! add]</span></span>
<span class="line">        <span class="token literal-property property">https</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// [tl! add]</span></span>
<span class="line">            <span class="token literal-property property">key</span><span class="token operator">:</span> fs<span class="token punctuation">.</span><span class="token function">readFileSync</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/path/to/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>host<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.key</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// [tl! add]</span></span>
<span class="line">            <span class="token literal-property property">cert</span><span class="token operator">:</span> fs<span class="token punctuation">.</span><span class="token function">readFileSync</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/path/to/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>host<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.crt</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// [tl! add]</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// [tl! add]</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// [tl! add]</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果你无法为系统生成可信证书，则可以安装并配置 <a href="https://github.com/vitejs/vite-plugin-basic-ssl" target="_blank" rel="noopener noreferrer"><code v-pre>@vitejs/plugin-basic-ssl</code> 插件</a>。使用不受信任的证书时，你需要通过在运行 <code v-pre>npm run dev</code> 命令时按照控制台中的“Local”链接接受 Vite 开发服务器的证书警告。</p>
<h3 id="加载你的脚本和样式" tabindex="-1"><a class="header-anchor" href="#加载你的脚本和样式"><span>加载你的脚本和样式</span></a></h3>
<p>配置了 Vite 入口点后，你只需要在应用程序根模板的 <code v-pre>&lt;head&gt;</code> 中添加一个 <code v-pre>@vite()</code> Blade 指令引用它们即可：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;!doctype html&gt;</span>
<span class="line">&lt;head&gt;</span>
<span class="line">    {{-- ... --}}</span>
<span class="line"></span>
<span class="line">    @vite(['resources/css/app.css', 'resources/js/app.js'])</span>
<span class="line">&lt;/head&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果你通过 JavaScript 导入你的 CSS 文件，你只需要包含 JavaScript 的入口点：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;!doctype html&gt;</span>
<span class="line">&lt;head&gt;</span>
<span class="line">    {{-- ... --}}</span>
<span class="line"></span>
<span class="line">    @vite('resources/js/app.js')</span>
<span class="line">&lt;/head&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>@vite</code> 指令会自动检测 Vite 开发服务器并注入 Vite 客户端以启用热模块替换。在构建模式下，该指令将加载已编译和版本化的资产，包括任何导入的 CSS 文件。</p>
<p>如果需要，在调用 <code v-pre>@vite</code> 指令时，你还可以指定已编译资产的构建路径：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;!doctype html&gt;</span>
<span class="line">&lt;head&gt;</span>
<span class="line">    {{-- Given build path is relative to public path. --}}</span>
<span class="line"></span>
<span class="line">    @vite('resources/js/app.js', 'vendor/courier/build')</span>
<span class="line">&lt;/head&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="行内资产" tabindex="-1"><a class="header-anchor" href="#行内资产"><span>行内资产</span></a></h2>
<p>有些时候有必要把资产的原始内容写进来，而不是连接到资产的版本化URL。比如，当你把HTML内容传递给一个PDF生成器时，你可以把资产内容直接写到你的页面。你也可以使用Vite门面(facade)提供的content方法，来输出Vite资产内容：</p>
<div class="language-html line-numbers-mode" data-highlighter="prismjs" data-ext="html" data-title="html"><pre v-pre class="language-html"><code><span class="line">@php</span>
<span class="line">use Illuminate\Support\Facades\Vite;</span>
<span class="line">@endphp</span>
<span class="line"></span>
<span class="line"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span></span>
<span class="line">    {{-- ... --}}</span>
<span class="line"></span>
<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"></span>
<span class="line">        <span class="token punctuation">{</span>!! <span class="token property">Vite</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">content</span><span class="token punctuation">(</span><span class="token string">'resources/css/app.css'</span><span class="token punctuation">)</span> !!<span class="token punctuation">}</span></span>
<span class="line">    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span></span>
<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
<span class="line">        <span class="token punctuation">{</span><span class="token operator">!</span><span class="token operator">!</span> Vite<span class="token operator">:</span><span class="token operator">:</span><span class="token function">content</span><span class="token punctuation">(</span><span class="token string">'resources/js/app.js'</span><span class="token punctuation">)</span> <span class="token operator">!</span><span class="token operator">!</span><span class="token punctuation">}</span></span>
<span class="line">    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="运行-vite" tabindex="-1"><a class="header-anchor" href="#运行-vite"><span>运行 Vite</span></a></h2>
<p>你可以通过两种方式运行 Vite。你可以通过 <code v-pre>dev</code> 命令运行开发服务器，在本地开发时非常有用。开发服务器会自动检测文件的更改，并立即在任何打开的浏览器窗口中反映这些更改。</p>
<p>或者，运行 <code v-pre>build</code> 命令将版本化并打包应用程序的资产，并准备好部署到生产环境：</p>
<p>Or, running the <code v-pre>build</code> command will version and bundle your application’s assets and get them ready for you to deploy to production:</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line"><span class="token comment"># Run the Vite development server...</span></span>
<span class="line"><span class="token function">npm</span> run dev</span>
<span class="line"></span>
<span class="line"><span class="token comment"># Build and version the assets for production...</span></span>
<span class="line"><span class="token function">npm</span> run build</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="使用-javascript" tabindex="-1"><a class="header-anchor" href="#使用-javascript"><span>使用 JavaScript</span></a></h2>
<h3 id="别名" tabindex="-1"><a class="header-anchor" href="#别名"><span>别名</span></a></h3>
<p>默认情况下，Laravel 插件提供一个常用的别名，以帮助你快速开始并方便地导入你的应用程序的资产：</p>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line"><span class="token punctuation">{</span></span>
<span class="line">    <span class="token string">'@'</span> <span class="token operator">=></span> <span class="token string">'/resources/js'</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>你可以通过添加自己的别名到 <code v-pre>vite.config.js</code> 配置文件中，覆盖 <code v-pre>'@'</code> 别名：</p>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vite'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> laravel <span class="token keyword">from</span> <span class="token string">'laravel-vite-plugin'</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">    <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token function">laravel</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'resources/ts/app.tsx'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token literal-property property">resolve</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token literal-property property">alias</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token string-property property">'@'</span><span class="token operator">:</span> <span class="token string">'/resources/ts'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="vue" tabindex="-1"><a class="header-anchor" href="#vue"><span>Vue</span></a></h3>
<p>如果你想要使用 <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue</a> 框架构建前端，那么你还需要安装 <code v-pre>@vitejs/plugin-vue</code> 插件：</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line"><span class="token function">npm</span> <span class="token function">install</span> --save-dev @vitejs/plugin-vue</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>然后你可以在 <code v-pre>vite.config.js</code> 配置文件中包含该插件。当使用 Laravel 和 Vue 插件时，还需要一些附加选项：</p>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vite'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> laravel <span class="token keyword">from</span> <span class="token string">'laravel-vite-plugin'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> vue <span class="token keyword">from</span> <span class="token string">'@vitejs/plugin-vue'</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">    <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token function">laravel</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'resources/js/app.js'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token function">vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">            <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line">                <span class="token literal-property property">transformAssetUrls</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line">                    <span class="token comment">// Vue 插件会重新编写资产 URL，以便在单文件组件中引用时，指向 Laravel web 服务器。</span></span>
<span class="line">                    <span class="token comment">// 将其设置为 `null`，则 Laravel 插件会将资产 URL 重新编写为指向 Vite 服务器。</span></span>
<span class="line">                    <span class="token literal-property property">base</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span></span>
<span class="line"></span>
<span class="line">                    <span class="token comment">// Vue 插件将解析绝对 URL 并将其视为磁盘上文件的绝对路径。</span></span>
<span class="line">                    <span class="token comment">// 将其设置为 `false`，将保留绝对 URL 不变，以便可以像预期那样引用公共目录中的资源。</span></span>
<span class="line">                    <span class="token literal-property property">includeAbsolute</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span>
<span class="line">                <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>注意</strong><br>
Laravel 的 <a href="https://learnku.com/docs/laravel/10.x/starter-kits" target="_blank" rel="noopener noreferrer">起步套件</a> 已经包含了适当的 Laravel、Vue 和 Vite 配置。请查看 <a href="https://learnku.com/docs/laravel/10.x/starter-kitsmd#breeze-and-inertia" target="_blank" rel="noopener noreferrer">Laravel Breeze</a> 以了解使用 Laravel、Vue 和 Vite 快速入门的最快方法。</p>
<h3 id="react" tabindex="-1"><a class="header-anchor" href="#react"><span>React</span></a></h3>
<p>如果你想要使用 <a href="https://reactjs.org/" target="_blank" rel="noopener noreferrer">React</a> 框架构建前端，那么你还需要安装 <code v-pre>@vitejs/plugin-react</code> 插件：</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line"><span class="token function">npm</span> <span class="token function">install</span> --save-dev @vitejs/plugin-react</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>你可以在 <code v-pre>vite.config.js</code> 配置文件中包含该插件：</p>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vite'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> laravel <span class="token keyword">from</span> <span class="token string">'laravel-vite-plugin'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> react <span class="token keyword">from</span> <span class="token string">'@vitejs/plugin-react'</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">    <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token function">laravel</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'resources/js/app.jsx'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token function">react</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>当使用 Vite 和 React 时，你将需要确保任何包含 JSX 的文件都有一个 .jsx 和 .tsx 扩展，记住更新入口文件，如果需要 <a href="#configuring-vite">如上所示</a>。你还需要在现有的 <code v-pre>@vite</code> 指令旁边包含额外的 <code v-pre>@viteReactRefresh</code> Blade 指令。</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">@viteReactRefresh</span>
<span class="line">@vite('resources/js/app.jsx')</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>@viteReactRefresh</code> 指令必须在 <code v-pre>@vite</code> 指令之前调用 。</p>
<blockquote>
<p><strong>注意</strong><br>
Laravel 的 <a href="https://learnku.com/docs/laravel/10.x/starter-kits" target="_blank" rel="noopener noreferrer">起步套件</a> 已经包含了适合的 Laravel、React 和 Vite 配置。查看 <a href="https://learnku.com/docs/laravel/10.x/starter-kitsmd#breeze-and-inertia" target="_blank" rel="noopener noreferrer">Laravel Breeze</a> 以最快的方式开始学习 Laravel、React 和 Vite。</p>
</blockquote>
<h3 id="inertia" tabindex="-1"><a class="header-anchor" href="#inertia"><span>Inertia</span></a></h3>
<p>Laravel Vite 插件提供了一个方便的 <code v-pre>resolvePageComponent</code> 函数，帮助你解决 Inertia 页面组件。以下是使用 Vue 3 的助手示例；然而，你也可以在其他框架中使用该函数，例如 React：</p>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> createApp<span class="token punctuation">,</span> h <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> createInertiaApp <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@inertiajs/vue3'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> resolvePageComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'laravel-vite-plugin/inertia-helpers'</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token function">createInertiaApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">  <span class="token function-variable function">resolve</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">resolvePageComponent</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">./Pages/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.vue</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token keyword">import</span><span class="token punctuation">.</span>meta<span class="token punctuation">.</span><span class="token function">glob</span><span class="token punctuation">(</span><span class="token string">'./Pages/**/*.vue'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> el<span class="token punctuation">,</span> App<span class="token punctuation">,</span> props<span class="token punctuation">,</span> plugin <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">return</span> <span class="token function">createApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token function-variable function">render</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">h</span><span class="token punctuation">(</span>App<span class="token punctuation">,</span> props<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line">      <span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>plugin<span class="token punctuation">)</span></span>
<span class="line">      <span class="token punctuation">.</span><span class="token function">mount</span><span class="token punctuation">(</span>el<span class="token punctuation">)</span></span>
<span class="line">  <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p><strong>注意</strong><br>
Laravel 的 <a href="https://learnku.com/docs/laravel/10.x/starter-kits" target="_blank" rel="noopener noreferrer">起步套件</a> 已经包含了适合的 Laravel、Inertia 和 Vite 配置。查看 <a href="https://learnku.com/docs/laravel/10.x/starter-kitsmd#breeze-and-inertia" target="_blank" rel="noopener noreferrer">Laravel Breeze</a> 以最快的方式开始学习 Laravel、Inertia 和 Vite。</p>
</blockquote>
<h3 id="url-处理" tabindex="-1"><a class="header-anchor" href="#url-处理"><span>URL 处理</span></a></h3>
<p>当使用 Vite 并在你的应用程序的 HTML，CSS 和 JS 中引用资源时，有几件事情需要考虑。首先，如果你使用绝对路径引用资源，Vite 将不会在构建中包含资源；因此，你需要确认资源在你的公共目录中是可用的。</p>
<p>在引用相对路径的资源时，你应该记住这些路径是相对于它们被引用的文件的路径。通过相对路径引用的所有资源都将被 Vite 重写、版本化和打包。</p>
<p>参考以下项目结构：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">public</span><span class="token operator">/</span></span>
<span class="line">  taylor<span class="token operator">.</span>png</span>
<span class="line">resources<span class="token operator">/</span></span>
<span class="line">  js<span class="token operator">/</span></span>
<span class="line">    Pages<span class="token operator">/</span></span>
<span class="line">      Welcome<span class="token operator">.</span>vue</span>
<span class="line">  images<span class="token operator">/</span></span>
<span class="line">    abigail<span class="token operator">.</span>png</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>以下示例演示了 Vite 如何处理相对路径和绝对 URL：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 这个资源不被 Vite 处理，不会被包含在构建中 <span class="token operator">--</span><span class="token operator">></span></span>
<span class="line"><span class="token operator">&lt;</span>img src<span class="token operator">=</span><span class="token string double-quoted-string">"/taylor.png"</span><span class="token operator">></span></span>
<span class="line"></span>
<span class="line"><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 这个资源将由 Vite 重写、版本化和打包 <span class="token operator">--</span><span class="token operator">></span></span>
<span class="line"><span class="token operator">&lt;</span>img src<span class="token operator">=</span><span class="token string double-quoted-string">"../../images/abigail.png"</span><span class="token operator">></span>` </span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="使用样式表" tabindex="-1"><a class="header-anchor" href="#使用样式表"><span>使用样式表</span></a></h2>
<p>你可以在 <a href="https://vitejs.dev/guide/features.html#css" target="_blank" rel="noopener noreferrer">Vite 文档</a> 中了解有关 Vite 的 CSS 支持更多的信息。如果你使用 PostCSS 插件，如 <a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">Tailwind</a>，你可以在项目的根目录中创建一个 <code v-pre>postcss.config.js</code> 文件，Vite 会自动应用它：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">module<span class="token operator">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span></span>
<span class="line">    plugins<span class="token punctuation">:</span> <span class="token punctuation">{</span></span>
<span class="line">        tailwindcss<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token argument-name">autoprefixer</span><span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p><strong>注意</strong> Laravel 的 <a href="https://learnku.com/docs/laravel/10.x/starter-kits" target="_blank" rel="noopener noreferrer">起始套件</a> 已经包含了正确的 Tailwind、PostCSS 和 Vite 配置。或者，如果你想在不使用我们的起始套件的情况下使用 Tailwind 和 Laravel，请查看 <a href="https://tailwindcss.com/docs/guides/laravel" target="_blank" rel="noopener noreferrer">Tailwind 的 Laravel 安装指南</a>。</p>
</blockquote>
<h2 id="使用-blade-和-路由" tabindex="-1"><a class="header-anchor" href="#使用-blade-和-路由"><span>使用 Blade 和 路由</span></a></h2>
<h3 id="通过-vite-处理静态资源" tabindex="-1"><a class="header-anchor" href="#通过-vite-处理静态资源"><span>通过 Vite 处理静态资源</span></a></h3>
<p>在你的 JavaScript 或 CSS 中引用资源时，Vite 会自动处理和版本化它们。此外，在构建基于 Blade 的应用程序时，Vite 还可以处理和版本化你仅在 Blade 模板中引用的静态资源。</p>
<p>然而，要实现这一点，你需要通过将静态资源导入到应用程序的入口点来让 Vite 了解你的资源。例如，如果你想处理和版本化存储在 <code v-pre>resources/images</code> 中的所有图像和存储在 <code v-pre>resources/fonts</code> 中的所有字体，你应该在应用程序的 <code v-pre>resources/js/app.js</code> 入口点中添加以下内容：</p>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span><span class="token punctuation">.</span>meta<span class="token punctuation">.</span><span class="token function">glob</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">  <span class="token string">'../images/**'</span><span class="token punctuation">,</span></span>
<span class="line">  <span class="token string">'../fonts/**'</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>这些资源将在运行 <code v-pre>npm run build</code> 时由 Vite 处理。然后，你可以在 Blade 模板中使用 <code v-pre>Vite::asset</code> 方法引用这些资源，该方法将返回给定资源的版本化 URL：</p>
<div class="language-blade line-numbers-mode" data-highlighter="prismjs" data-ext="blade" data-title="blade"><pre v-pre class="language-blade"><code><span class="line">&lt;img src=&quot;{{ Vite::asset('resources/images/logo.png') }}&quot;&gt;</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="保存刷新" tabindex="-1"><a class="header-anchor" href="#保存刷新"><span>保存刷新</span></a></h3>
<p>当你的应用程序使用传统的服务器端渲染 Blade 构建时，Vite 可以通过在你的应用程序中更改视图文件时自动刷新浏览器来提高你的开发工作流程。要开始，你可以简单地将 <code v-pre>refresh</code> 选项指定为 <code v-pre>true</code>。</p>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vite'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> laravel <span class="token keyword">from</span> <span class="token string">'laravel-vite-plugin'</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">    <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token function">laravel</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">            <span class="token comment">// ...</span></span>
<span class="line">            <span class="token literal-property property">refresh</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>当 <code v-pre>refresh</code> 选项为 <code v-pre>true</code> 时，保存以下目录中的文件将在你运行 <code v-pre>npm run dev</code> 时触发浏览器进行全面的页面刷新：</p>
<ul>
<li><code v-pre>app/View/Components/**</code></li>
<li><code v-pre>lang/**</code></li>
<li><code v-pre>resources/lang/**</code></li>
<li><code v-pre>resources/views/**</code></li>
<li><code v-pre>routes/**</code></li>
</ul>
<p>监听 <code v-pre>routes/**</code> 目录对于在应用程序前端中利用 <a href="https://github.com/tighten/ziggy" target="_blank" rel="noopener noreferrer">Ziggy</a> 生成路由链接非常有用。</p>
<p>如果这些默认路径不符合你的需求，你可以指定自己的路径列表：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">import <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> from <span class="token string single-quoted-string">'vite'</span><span class="token punctuation">;</span></span>
<span class="line">import laravel from <span class="token string single-quoted-string">'laravel-vite-plugin'</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">export <span class="token keyword">default</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">    plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token function">laravel</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">            <span class="token comment">// ...</span></span>
<span class="line">            refresh<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'resources/views/**'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>在后台，Laravel Vite 插件使用了 <a href="https://github.com/ElMassimo/vite-plugin-full-reload" target="_blank" rel="noopener noreferrer"><code v-pre>vite-plugin-full-reload</code></a> 包，该包提供了一些高级配置选项，可微调此功能的行为。如果你需要这种级别的自定义，可以提供一个 <code v-pre>config</code> 定义：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">import <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> from <span class="token string single-quoted-string">'vite'</span><span class="token punctuation">;</span></span>
<span class="line">import laravel from <span class="token string single-quoted-string">'laravel-vite-plugin'</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">export <span class="token keyword">default</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">    plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token function">laravel</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">            <span class="token comment">// ...</span></span>
<span class="line">            refresh<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span></span>
<span class="line">                paths<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'path/to/watch/**'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">                <span class="token argument-name">config</span><span class="token punctuation">:</span> <span class="token punctuation">{</span> delay<span class="token punctuation">:</span> <span class="token number">300</span> <span class="token punctuation">}</span></span>
<span class="line">            <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="别名-1" tabindex="-1"><a class="header-anchor" href="#别名-1"><span>别名</span></a></h3>
<p>在 JavaScript 应用程序中创建别名来引用常用目录是很常见的。但是，你也可以通过在 <code v-pre>Illuminate\Support\Facades\Vite</code> 类上使用 <code v-pre>macro</code> 方法来创建在 Blade 中使用的别名。通常，“宏”应在 <a href="https://learnku.com/docs/laravel/10.x/providers" target="_blank" rel="noopener noreferrer">服务提供商</a> 的 <code v-pre>boot</code> 方法中定义：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token doc-comment comment">/**</span>
<span class="line"> * Bootstrap any application services.</span>
<span class="line"> */</span></span>
<span class="line"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">boot</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token class-name static-context">Vite</span><span class="token operator">::</span><span class="token function">macro</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'image'</span><span class="token punctuation">,</span> <span class="token keyword">fn</span> <span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$asset</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">asset</span><span class="token punctuation">(</span><span class="token string double-quoted-string">"resources/images/<span class="token interpolation"><span class="token punctuation">{</span><span class="token variable">$asset</span><span class="token punctuation">}</span></span>"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>定义了宏之后，可以在模板中调用它。例如，我们可以使用上面定义的 <code v-pre>image</code> 宏来引用位于 <code v-pre>resources/images/logo.png</code> 的资源：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">&lt;</span>img src<span class="token operator">=</span><span class="token string double-quoted-string">"{{ Vite::image('logo.png') }}"</span> alt<span class="token operator">=</span><span class="token string double-quoted-string">"Laravel Logo"</span><span class="token operator">></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="自定义-base-url" tabindex="-1"><a class="header-anchor" href="#自定义-base-url"><span>自定义 base URL</span></a></h3>
<p>如果你的 Vite 编译的资产部署到与应用程序不同的域（例如通过 CDN），必须在应用程序的 <code v-pre>.env</code> 文件中指定 <code v-pre>ASSET_URL</code> 环境变量：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token constant">ASSET_URL</span><span class="token operator">=</span>https<span class="token punctuation">:</span><span class="token comment">//cdn.example.com</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>在配置了资源 URL 之后，所有重写的 URL 都将以配置的值为前缀：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">https<span class="token punctuation">:</span><span class="token comment">//cdn.example.com/build/assets/app.9dce8d17.js</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>请记住，<a href="https://learnku.com/#url-processing" target="_blank" rel="noopener noreferrer">绝对路径的 URL 不会被 Vite 重新编写</a>，因此它们不会被添加前缀。</p>
<h3 id="环境变量" tabindex="-1"><a class="header-anchor" href="#环境变量"><span>环境变量</span></a></h3>
<p>你可以在应用程序的 <code v-pre>.env</code> 文件中以 <code v-pre>VITE_</code> 为前缀注入环境变量以在 JavaScript 中使用：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token constant">VITE_SENTRY_DSN_PUBLIC</span><span class="token operator">=</span>http<span class="token punctuation">:</span><span class="token comment">//example.com</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>你可以通过 <code v-pre>import.meta.env</code> 对象访问注入的环境变量：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">import<span class="token operator">.</span>meta<span class="token operator">.</span>env<span class="token operator">.</span><span class="token constant">VITE_SENTRY_DSN_PUBLIC</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="在测试中禁用-vite" tabindex="-1"><a class="header-anchor" href="#在测试中禁用-vite"><span>在测试中禁用 Vite</span></a></h3>
<p>Laravel 的 Vite 集成将在运行测试时尝试解析你的资产，这需要你运行 Vite 开发服务器或构建你的资产。</p>
<p>如果你希望在测试中模拟 Vite，你可以调用 <code v-pre>withoutVite</code> 方法，该方法对任何扩展 Laravel 的 <code v-pre>TestCase</code> 类的测试都可用：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Tests<span class="token punctuation">\</span>TestCase</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">ExampleTest</span> <span class="token keyword">extends</span> <span class="token class-name">TestCase</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">test_without_vite_example</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">withoutVite</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token comment">// ...</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果你想在所有测试中禁用 Vite，可以在基本的 <code v-pre>TestCase</code> 类上的 <code v-pre>setUp</code> 方法中调用 <code v-pre>withoutVite</code> 方法：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">Tests</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Foundation<span class="token punctuation">\</span>Testing<span class="token punctuation">\</span>TestCase</span> <span class="token keyword">as</span> BaseTestCase<span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">abstract</span> <span class="token keyword">class</span> <span class="token class-name-definition class-name">TestCase</span> <span class="token keyword">extends</span> <span class="token class-name">BaseTestCase</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token keyword">use</span> <span class="token package">CreatesApplication</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token keyword">protected</span> <span class="token keyword">function</span> <span class="token function-definition function">setUp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword return-type">void</span><span class="token comment">// [tl! add:start] {</span></span>
<span class="line">        <span class="token keyword static-context">parent</span><span class="token operator">::</span><span class="token function">setUp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token variable">$this</span><span class="token operator">-></span><span class="token function">withoutVite</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token comment">// [tl! add:end]</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="服务器端渲染" tabindex="-1"><a class="header-anchor" href="#服务器端渲染"><span>服务器端渲染</span></a></h3>
<p>Laravel Vite 插件可以轻松地设置与 Vite 的服务器端渲染。要开始使用，请在 <code v-pre>resources/js</code> 中创建一个 SSR（Server-Side Rendering）入口点，并通过将配置选项传递给 Laravel 插件来指定入口点：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">import <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> from <span class="token string single-quoted-string">'vite'</span><span class="token punctuation">;</span></span>
<span class="line">import laravel from <span class="token string single-quoted-string">'laravel-vite-plugin'</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">export <span class="token keyword">default</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">    plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token function">laravel</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">            input<span class="token punctuation">:</span> <span class="token string single-quoted-string">'resources/js/app.js'</span><span class="token punctuation">,</span></span>
<span class="line">            <span class="token argument-name">ssr</span><span class="token punctuation">:</span> <span class="token string single-quoted-string">'resources/js/ssr.js'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>为确保不遗漏重建 SSR 入口点，我们建议增加应用程序的 <code v-pre>package.json</code> 中的 「build」 脚本来创建 SSR 构建：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token string double-quoted-string">"scripts"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span></span>
<span class="line">     <span class="token string double-quoted-string">"dev"</span><span class="token punctuation">:</span> <span class="token string double-quoted-string">"vite"</span><span class="token punctuation">,</span></span>
<span class="line">     <span class="token string double-quoted-string">"build"</span><span class="token punctuation">:</span> <span class="token string double-quoted-string">"vite build"</span> <span class="token comment">// [tl! remove]</span></span>
<span class="line">     <span class="token string double-quoted-string">"build"</span><span class="token punctuation">:</span> <span class="token string double-quoted-string">"vite build &amp;&amp; vite build --ssr"</span> <span class="token comment">// [tl! add]</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后，要构建和启动 SSR 服务器，你可以运行以下命令：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">npm run build</span>
<span class="line">node bootstrap<span class="token operator">/</span>ssr<span class="token operator">/</span>ssr<span class="token operator">.</span>mjs</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p><strong>注意</strong> Laravel 的 <a href="https://learnku.com/docs/laravel/10.x/starter-kits" target="_blank" rel="noopener noreferrer">starter kits</a> 已经包含了适当的 Laravel、Inertia SSR 和 Vite 配置。查看 <a href="https://learnku.com/docs/laravel/10.x/starter-kitsmd#breeze-and-inertia" target="_blank" rel="noopener noreferrer">Laravel Breeze</a> ，以获得使用 Laravel、Inertia SSR 和 Vite 的最快速的方法。</p>
</blockquote>
<h2 id="script-style-标签的属性" tabindex="-1"><a class="header-anchor" href="#script-style-标签的属性"><span>Script &amp; Style 标签的属性</span></a></h2>
<h3 id="content-security-policy-csp-nonce" tabindex="-1"><a class="header-anchor" href="#content-security-policy-csp-nonce"><span>Content Security Policy (CSP) Nonce</span></a></h3>
<p>如果你希望在你的脚本和样式标签中包含 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce" target="_blank" rel="noopener noreferrer"><code v-pre>nonce</code> 属性</a>，作为你的 <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP" target="_blank" rel="noopener noreferrer">Content Security Policy</a> 的一部分，你可以使用自定义 <a href="https://learnku.com/docs/laravel/10.x/middleware" target="_blank" rel="noopener noreferrer">middleware</a> 中的 <code v-pre>useCspNonce</code> 方法生成或指定一个 nonce：</p>
<p>Copy code</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token php language-php"><span class="token delimiter important">&lt;?php</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">namespace</span> <span class="token package">App<span class="token punctuation">\</span>Http<span class="token punctuation">\</span>Middleware</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Closure</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Http<span class="token punctuation">\</span>Request</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>Vite</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">use</span> <span class="token package">Symfony<span class="token punctuation">\</span>Component<span class="token punctuation">\</span>HttpFoundation<span class="token punctuation">\</span>Response</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">class</span> <span class="token class-name-definition class-name">AddContentSecurityPolicyHeaders</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token doc-comment comment">/**</span>
<span class="line">     * Handle an incoming request.</span>
<span class="line">     *</span>
<span class="line">     * <span class="token keyword">@param</span>  <span class="token class-name"><span class="token punctuation">\</span>Closure</span>(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response)  $next</span>
<span class="line">     */</span></span>
<span class="line">    <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">handle</span><span class="token punctuation">(</span><span class="token class-name type-declaration">Request</span> <span class="token variable">$request</span><span class="token punctuation">,</span> <span class="token class-name type-declaration">Closure</span> <span class="token variable">$next</span><span class="token punctuation">,</span> <span class="token keyword type-hint">string</span> <span class="token variable">$role</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token class-name return-type">Response</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token class-name static-context">Vite</span><span class="token operator">::</span><span class="token function">useCspNonce</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">        <span class="token keyword">return</span> <span class="token variable">$next</span><span class="token punctuation">(</span><span class="token variable">$request</span><span class="token punctuation">)</span><span class="token operator">-></span><span class="token function">withHeaders</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">            <span class="token string single-quoted-string">'Content-Security-Policy'</span> <span class="token operator">=></span> <span class="token string double-quoted-string">"script-src 'nonce-"</span><span class="token operator">.</span><span class="token class-name static-context">Vite</span><span class="token operator">::</span><span class="token function">cspNonce</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">.</span><span class="token string double-quoted-string">"'"</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>调用了 <code v-pre>useCspNonce</code> 方法后，Laravel 将自动在所有生成的脚本和样式标签上包含 <code v-pre>nonce</code> 属性。</p>
<p>如果你需要在其他地方指定 nonce，包括 Laravel 的 starter kits 中带有的 <a href="https://github.com/tighten/ziggy#using-routes-with-a-content-security-policy" target="_blank" rel="noopener noreferrer">Ziggy <code v-pre>@route</code> directive</a> 指令，你可以使用 <code v-pre>cspNonce</code> 方法来检索它：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">@<span class="token function">routes</span><span class="token punctuation">(</span><span class="token argument-name">nonce</span><span class="token punctuation">:</span> <span class="token class-name static-context">Vite</span><span class="token operator">::</span><span class="token function">cspNonce</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>如果你已经有了一个 nonce，想要告诉 Laravel 使用它，你可以通过将 nonce 传递给 <code v-pre>useCspNonce</code> 方法来实现：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Vite</span><span class="token operator">::</span><span class="token function">useCspNonce</span><span class="token punctuation">(</span><span class="token variable">$nonce</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>###子资源完整性 (SRI)<br>
如果你的 <code v-pre>Vite manifest</code> 中包括资源的完整性哈希，则 Laravel 将自动向其生成的任何脚本和样式标签中添加 <code v-pre>integrity</code> 属性，以执行 子资源完整性。默认情况下，Vite 不包括其清单中的 <code v-pre>integrity</code> 哈希，但是你可以通过安装 <code v-pre>vite-plugin-manifest-sri</code> NPM 插件来启用它：</p>
<div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre v-pre class="language-bash"><code><span class="line"><span class="token function">npm</span> <span class="token function">install</span> --save-dev vite-plugin-manifest-sri</span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p>然后，在你的 <code v-pre>vite.config.js</code> 文件中启用此插件：</p>
<div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre v-pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vite'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> laravel <span class="token keyword">from</span> <span class="token string">'laravel-vite-plugin'</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">import</span> manifestSRI <span class="token keyword">from</span> <span class="token string">'vite-plugin-manifest-sri'</span><span class="token punctuation">;</span><span class="token comment">// [tl! add]</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">    <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token function">laravel</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">            <span class="token comment">// ...</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token function">manifestSRI</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token comment">// [tl! add]</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果需要，你也可以自定义清单中的完整性哈希键：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>Vite</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token class-name static-context">Vite</span><span class="token operator">::</span><span class="token function">useIntegrityKey</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'custom-integrity-key'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果你想完全禁用这个自动检测，你可以将 <code v-pre>false</code> 传递给 <code v-pre>useIntegrityKey</code> 方法：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token class-name static-context">Vite</span><span class="token operator">::</span><span class="token function">useIntegrityKey</span><span class="token punctuation">(</span><span class="token constant boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><h3 id="任意属性" tabindex="-1"><a class="header-anchor" href="#任意属性"><span>任意属性</span></a></h3>
<p>如果你需要在脚本和样式标签中包含其他属性，例如 <code v-pre>data-turbo-track</code> 属性，你可以通过 <code v-pre>useScriptTagAttributes</code> 和 <code v-pre>useStyleTagAttributes</code> 方法指定它们。通常，这些方法应从一个服务提供程序中调用：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>Vite</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token class-name static-context">Vite</span><span class="token operator">::</span><span class="token function">useScriptTagAttributes</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">    <span class="token string single-quoted-string">'data-turbo-track'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'reload'</span><span class="token punctuation">,</span> <span class="token comment">// 为属性指定一个值...</span></span>
<span class="line">    <span class="token string single-quoted-string">'async'</span> <span class="token operator">=></span> <span class="token constant boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 在不使用值的情况下指定属性...</span></span>
<span class="line">    <span class="token string single-quoted-string">'integrity'</span> <span class="token operator">=></span> <span class="token constant boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 排除一个将被包含的属性...</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token class-name static-context">Vite</span><span class="token operator">::</span><span class="token function">useStyleTagAttributes</span><span class="token punctuation">(</span><span class="token punctuation">[</span></span>
<span class="line">    <span class="token string single-quoted-string">'data-turbo-track'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'reload'</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如果你需要有条件地添加属性，你可以传递一个回调函数，它将接收到资产源路径、它的URL、它的清单块和整个清单：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Illuminate<span class="token punctuation">\</span>Support<span class="token punctuation">\</span>Facades<span class="token punctuation">\</span>Vite</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token class-name static-context">Vite</span><span class="token operator">::</span><span class="token function">useScriptTagAttributes</span><span class="token punctuation">(</span><span class="token keyword">fn</span> <span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$src</span><span class="token punctuation">,</span> <span class="token keyword type-hint">string</span> <span class="token variable">$url</span><span class="token punctuation">,</span> <span class="token keyword type-declaration">array</span><span class="token operator">|</span><span class="token keyword type-declaration">null</span> <span class="token variable">$chunk</span><span class="token punctuation">,</span> <span class="token keyword type-declaration">array</span><span class="token operator">|</span><span class="token keyword type-declaration">null</span> <span class="token variable">$manifest</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span></span>
<span class="line">    <span class="token string single-quoted-string">'data-turbo-track'</span> <span class="token operator">=></span> <span class="token variable">$src</span> <span class="token operator">===</span> <span class="token string single-quoted-string">'resources/js/app.js'</span> <span class="token operator">?</span> <span class="token string single-quoted-string">'reload'</span> <span class="token punctuation">:</span> <span class="token constant boolean">false</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token class-name static-context">Vite</span><span class="token operator">::</span><span class="token function">useStyleTagAttributes</span><span class="token punctuation">(</span><span class="token keyword">fn</span> <span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$src</span><span class="token punctuation">,</span> <span class="token keyword type-hint">string</span> <span class="token variable">$url</span><span class="token punctuation">,</span> <span class="token keyword type-declaration">array</span><span class="token operator">|</span><span class="token keyword type-declaration">null</span> <span class="token variable">$chunk</span><span class="token punctuation">,</span> <span class="token keyword type-declaration">array</span><span class="token operator">|</span><span class="token keyword type-declaration">null</span> <span class="token variable">$manifest</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span></span>
<span class="line">    <span class="token string single-quoted-string">'data-turbo-track'</span> <span class="token operator">=></span> <span class="token variable">$chunk</span> <span class="token operator">&amp;&amp;</span> <span class="token variable">$chunk</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'isEntry'</span><span class="token punctuation">]</span> <span class="token operator">?</span> <span class="token string single-quoted-string">'reload'</span> <span class="token punctuation">:</span> <span class="token constant boolean">false</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p><strong>警告</strong><br>
在 Vite 开发服务器运行时，<code v-pre>$chunk</code> 和 <code v-pre>$manifest</code> 参数将为 <code v-pre>null</code>。</p>
</blockquote>
<h2 id="高级定制" tabindex="-1"><a class="header-anchor" href="#高级定制"><span>高级定制</span></a></h2>
<p>默认情况下，Laravel 的 Vite 插件使用合理的约定，适用于大多数应用，但是有时你可能需要自定义 Vite 的行为。为了启用额外的自定义选项，我们提供了以下方法和选项，可以用于替代 <code v-pre>@vite</code> Blade 指令：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">&lt;</span><span class="token operator">!</span>doctype html<span class="token operator">></span></span>
<span class="line"><span class="token operator">&lt;</span>head<span class="token operator">></span></span>
<span class="line">    <span class="token punctuation">{</span><span class="token punctuation">{</span><span class="token operator">--</span> <span class="token operator">...</span> <span class="token operator">--</span><span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line">    <span class="token punctuation">{</span><span class="token punctuation">{</span></span>
<span class="line">        <span class="token class-name static-context">Vite</span><span class="token operator">::</span><span class="token function">useHotFile</span><span class="token punctuation">(</span><span class="token function">storage_path</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'vite.hot'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 自定义 "hot" 文件...</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">useBuildDirectory</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'bundle'</span><span class="token punctuation">)</span> <span class="token comment">// 自定义构建目录...</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">useManifestFilename</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'assets.json'</span><span class="token punctuation">)</span> <span class="token comment">// 自定义清单文件名...</span></span>
<span class="line">            <span class="token operator">-></span><span class="token function">withEntryPoints</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string single-quoted-string">'resources/js/app.js'</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">// 指定入口点...</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="line"><span class="token operator">&lt;</span><span class="token operator">/</span>head<span class="token operator">></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>然后，在 <code v-pre>vite.config.js</code> 文件中，你应该指定相同的配置：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">import <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> from <span class="token string single-quoted-string">'vite'</span><span class="token punctuation">;</span></span>
<span class="line">import laravel from <span class="token string single-quoted-string">'laravel-vite-plugin'</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">export <span class="token keyword">default</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">    plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token function">laravel</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">            hotFile<span class="token punctuation">:</span> <span class="token string single-quoted-string">'storage/vite.hot'</span><span class="token punctuation">,</span> <span class="token comment">// 自定义 "hot" 文件...</span></span>
<span class="line">            buildDirectory<span class="token punctuation">:</span> <span class="token string single-quoted-string">'bundle'</span><span class="token punctuation">,</span> <span class="token comment">// 自定义构建目录...</span></span>
<span class="line">            input<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'resources/js/app.js'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 指定入口点...</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token argument-name">build</span><span class="token punctuation">:</span> <span class="token punctuation">{</span></span>
<span class="line">      manifest<span class="token punctuation">:</span> <span class="token string single-quoted-string">'assets.json'</span><span class="token punctuation">,</span> <span class="token comment">// 自定义清单文件名...</span></span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="修正开发服务器-url" tabindex="-1"><a class="header-anchor" href="#修正开发服务器-url"><span>修正开发服务器 URL</span></a></h3>
<p>Vite 生态系统中的某些插件默认假设以正斜杠开头的 URL 始终指向 Vite 开发服务器。然而，由于 Laravel 集成的性质，实际情况并非如此。</p>
<p>例如，<code v-pre>vite-imagetools</code> 插件在 Vite 服务时，你的资产时会输出以下类似的 URL：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">&lt;</span>img src<span class="token operator">=</span><span class="token string double-quoted-string">"/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520"</span><span class="token operator">></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div></div></div><p><code v-pre>vite-imagetools</code> 插件期望输出URL将被 Vite 拦截，并且插件可以处理所有以 <code v-pre>/@imagetools</code> 开头的 URL。如果你正在使用期望此行为的插件，则需要手动纠正 URL。你可以在 <code v-pre>vite.config.js</code> 文件中使用 <code v-pre>transformOnServe</code> 选项来实现。</p>
<p>在这个例子中，我们将在生成的代码中的所有 <code v-pre>/@imagetools</code> 钱加上开发服务器的 URL：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line">import <span class="token punctuation">{</span> defineConfig <span class="token punctuation">}</span> from <span class="token string single-quoted-string">'vite'</span><span class="token punctuation">;</span></span>
<span class="line">import laravel from <span class="token string single-quoted-string">'laravel-vite-plugin'</span><span class="token punctuation">;</span></span>
<span class="line">import <span class="token punctuation">{</span> imagetools <span class="token punctuation">}</span> from <span class="token string single-quoted-string">'vite-imagetools'</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">export <span class="token keyword">default</span> <span class="token function">defineConfig</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">    plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token function">laravel</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line">            <span class="token comment">// ...</span></span>
<span class="line">            transformOnServe<span class="token punctuation">:</span> <span class="token punctuation">(</span>code<span class="token punctuation">,</span> devServerUrl<span class="token punctuation">)</span> <span class="token operator">=></span> code<span class="token operator">.</span><span class="token function">replaceAll</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/@imagetools'</span><span class="token punctuation">,</span> devServerUrl<span class="token operator">+</span><span class="token string single-quoted-string">'/@imagetools'</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token function">imagetools</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>现在，在 Vite 提供资产服务时，它会输出URL指向 Vite 开发服务器：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token operator">-</span> <span class="token operator">&lt;</span>img src<span class="token operator">=</span><span class="token string double-quoted-string">"/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token punctuation">[</span>tl<span class="token operator">!</span> remove<span class="token punctuation">]</span> <span class="token operator">--</span><span class="token operator">></span></span>
<span class="line"><span class="token operator">+</span> <span class="token operator">&lt;</span>img src<span class="token operator">=</span><span class="token string double-quoted-string">"http://[::1]:5173/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520"</span><span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token punctuation">[</span>tl<span class="token operator">!</span> add<span class="token punctuation">]</span> <span class="token operator">--</span><span class="token operator">></span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div></div></div><blockquote>
<p>本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接<br>
我们的翻译工作遵照 <a href="https://learnku.com/docs/guide/cc4.0/6589" target="_blank" rel="noopener noreferrer">CC 协议</a>，如果我们的工作有侵犯到您的权益，请及时联系我们。</p>
</blockquote>
<hr>
<blockquote>
<p>原文地址：<a href="https://learnku.com/docs/laravel/10.x/vite/14853" target="_blank" rel="noopener noreferrer">https://learnku.com/docs/laravel/10.x/vi...</a></p>
<p>译文地址：<a href="https://learnku.com/docs/laravel/10.x/vite/14853" target="_blank" rel="noopener noreferrer">https://learnku.com/docs/laravel/10.x/vi...</a></p>
</blockquote>
</div></template>


